<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一虎一席精选集</title>
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="stylesheets/waterfall.css" />
</head>
<body>
	<div class="container">
		<div class="row">
			<div id="waterfall"></div>
		</div>
	</div>

	<div id="moreDiv">
		<div class="get-more-line">
			<a href="javascript:void(0);" id="more">加载更多...</a>
		</div>
	</div>

	<div id="scrollSidebar" class="scrollSidebar">
	  <a href="javascript:void(0)" id="goTop" title="回到顶部">
	  	<span class="wordMask">返回顶部</span>
	  	<i class="fa fa-chevron-up"></i>
	  </a>
	</div>

	<script src="libs/jquery-legacy/dist/jquery.min.js"></script>
	<script src="libs/jquery_lazyload/jquery.lazyload.min.js"></script>
	<script src="javascripts/jquery.waterfall.js"></script>
	<script type="text/javascript" charset="utf-8">
		var wf = $("#waterfall").waterfall();
		var pageNumber = 1, pageSize = 10;

		var searchParams = location.search;
		if(searchParams && searchParams.indexOf("pageSize=")){
			pageSize = parseInt(searchParams.substring(searchParams.indexOf("pageSize=")+9));
		}
		loadData();

		function loadData() {
			$.ajax({
				url : '/cms/waterfall/search?currentPage=' + pageNumber + '&pageSize=' + pageSize,
				type : 'GET',
				cache : true,
				success : function(res) {
					wf.loadData(res && res.pins);
					
					if(pageNumber>=res.totalPages){
						$("#more").html("没有更多了！").unbind('click touchstart');
					}else{
						pageNumber++;
					}
				},
				error : function(res) {
					console.log("加载失败");
				}
			});
		}

		$("#more").bind('click touchstart', function(e) {
			e.preventDefault();
			loadData();
		});

		window.onscroll = function(){
		  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		  var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
		  if(scrollTop > 50){
		    $("#scrollSidebar").fadeIn();
		  }else{
		    $("#scrollSidebar").fadeOut();
		  }
		};

		$("#goTop").click(function(){
		  $('body,html').animate({ scrollTop: 0 }, "fast");
		  return false;
		}).hover(function(){
			$(this).find(".wordMask").toggle();
		});
	</script>
</body>
</html>